<template>
	<view class="comment-container">
		<view class="comment-list">
			<CommentItem v-for="item in comment_list" :key="item.id" :comment="item"
				@reply="reply_comment" />
		</view>
		<uni-load-more :status="more" :contentText="{contentnomore: '没有更多评论了'}" />
		<SpeakComment :show_popup="show_popup" :article_id="article_id" :reply_data="reply_data"
			@close="show_popup=false" @send_over="send_over" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				article_id: '',
				comment_list: [],
				page: 1,
				show_popup: false,
				reply_data: {},
				more: 'more'
			}
		},
		onLoad(arg) {
			this.article_id = arg.article_id
			this._get_comment_list()
		},
		onReachBottom() { // 页面生命周期，页面触底事件
			if (this.more === 'noMore') return;
			this.page++
			this._get_comment_list()
		},
		methods: {
			async _get_comment_list() {
				this.more = 'loading'
				const comment_list = await this.$http.get_comment_list({
					article_id: this.article_id,
					page: this.page,
					page_size: 5
				})
				if (comment_list.length) {
					this.comment_list.push(...comment_list)
					this.more = 'more'
				} else {
					this.more = 'noMore'
				}
			},
			reply_comment(data) {
				if (!this.check_login()) return;
				this.reply_data = data.comment
				this.reply_data.is_reply = data.is_reply
				this.show_popup = true
			},
			send_over() {
				// 发送完评论，将评论数据初始化
				this.reply_data = {}
				this.page = 1
				this.comment_list = []
				this._get_comment_list()
			}
		}
	}
</script>
